<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
    <div class="layui-form dolphin-compile">
    <form th:action="@{/system/cate/save}">
        <input type="hidden" name="id" th:if="${cate}" th:value="${cate.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="name" placeholder="请输入分类名称" th:value="${cate?.name}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">父级分类</label>
            <div class="layui-input-inline">
                <input class="layui-input select-tree" th:attr="data-url=@{/system/cate/list}, data-value=${pMenu?.id}" type="text" name="pid"  placeholder="请输入父级菜单" th:value="${pMenu?.name}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-inline">
                <input class="layui-input icon" type="text" name="fontIcon" placeholder="请输入图标" th:value="${cate?.fontIcon}">
            </div>
            <div class="layui-form-mid layui-word-aux"><a target="_blank" id="seeIcons"
                                                          style="cursor:pointer;"><i
                    class="layui-icon layui-icon-search"></i> 查看应用包含的图标</a></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="cnName" placeholder="请输入别名" th:value="${cate?.cnName}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否展示</label>
                <div class="layui-input-block dolphin-search-status">
                    <select class="dolphin-search-select" name="show" mo:dict="TRUE_FALSE" mo-selected="${cate?.show}"></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">说明</label>
            <div class="layui-input-block">
                <textarea class="layui-input"  name="info" placeholder="请输入说明" th:text="${cate?.info}" style="height: 200px"></textarea>
            </div>
        </div>
        <div class="layui-form-item dolphin-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>
    <script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/dolphinTree.js}"></script>
    <script th:inline="javascript" >
        var type = [[${menu?.type}]];
        layui.use(['form'], function () {
            window.form = layui.form;

            // 初始化排序下拉选项
            var pid = $(".select-tree").data('value');
            if (pid !== undefined){
                sortRender({id: pid});
            }
            if (type!= '1'){
                $("#resources").show();
            } else {
                $("#resources").hide();
            }
            form.on('select(type)', function(data){
                console.log(data);
                if (data.value != '1'){
                    $("#resources").show();
                } else {
                    $("#resources").hide();
                }
            })
        });

        // 初始化下拉树
        $.fn.selectTree({
            rootTree: '顶级菜单',
            // 选中后事件
            onSelected: sortRender
        });

        // 更新渲染排序下拉选项
        function sortRender(treeNode) {
            var pid = treeNode.id;
            var sort = $(".select-sort");
            var id = sort.data('id') ? sort.data('id') : 0;
            var url = sort.data('url') + "/" + pid + "/" + id;
            $.get(url, function (result) {
                var options = '';
                var sortNum = Object.keys(result).length;
                if(pid === $(".select-tree").data('value') && sort.data('sort')){
                    sortNum = sort.data('sort') - 1;
                }
                result[0] = "首位";
                for(var key in result){
                    var selected = sortNum == key ? "selected=''" : "";
                    options += "<option value='"+ key +"' " + selected + ">"+ result[key] +"</option>";
                }
                sort.html(options);
                form.render('select');
            });
        }

    </script>
</body>
</html>
